<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>商品管理管理</title>
	<meta name="decorator" content="default"/>
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/plupload/bootstrap.min.css">
	<script type="text/javascript" src="${ctxStatic}/plupload/plupload.full.min.js"></script>
	<style>
		.ossfile-img {
			width: 200px;
		    display: inherit;
		    margin-top: 10px;
		}
	</style>
	<script type="text/javascript">
		var imageNames = [];
		$(document).ready(function() {
			
			var imageBe = $("#images").val();
			imageNames = imageBe.split(",");
			
			
			//实例化一个plupload上传对象
			var uploader = new plupload.Uploader({
				browse_button:"browse", //触发文件选择对话框的按钮，为那个元素id
				url:'${ctx}/product/product/genProduct/upload', //服务器端的上传页面地址
				flash_swf_url: '${ctxStatic}/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
				silverlight_xap_url: '${ctxStatic}/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
				filters : {
				    max_file_size : '100mb',
				    resize: {width: 320, height: 240, quality: 90}
			    }
			});    
	
			//在实例对象上调用init()方法进行初始化
			uploader.init();
			//绑定各种事件，并在事件监听函数中做你想做的事
	        uploader.bind('BeforeUpload',function(uploader,file){
				//每个事件监听函数都会传入一些很有用的参数，
				console.log("file:" + file);
		    });
			
			
		    //绑定各种事件，并在事件监听函数中做你想做的事
	        uploader.bind('FilesAdded',function(uploader,files){
				//每个事件监听函数都会传入一些很有用的参数，
				//我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
	            $("#ossfile").empty();
				plupload.each(files, function(file) {
					console.log(uploader);
					uploader.selFile = file;
					//对上传图片做限制
					if(file.size > 500000){
						alert("请上传小于500kb的图片")
						return false;
					}
					if ( file.name != "") {
						
						$("#fileName").val(file.name);
						$("#sizes").val(plupload.formatSize(file.size));
					}
					//得到文件夹的名字   保存在div中
					document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>' + '<div class="progress" id="ss"><div class="progress-bar" style="width: 0%"></div></div>' + '</div>';			    
				});
		    });
	        uploader.bind('UploadProgress',function(uploader,file){

				var d = document.getElementById(file.id);
				d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
				var prog = d.getElementsByTagName('div')[0];
				var progBar = prog.getElementsByTagName('div')[0]
				progBar.style.width = file.percent + '%';
				progBar.setAttribute('aria-valuenow', file.percent);
		    });
	        uploader.bind('UploadComplete',function(uploader,file){
	        	
		    });
	        
	        uploader.bind('FileUploaded',function(uploader,file,data){
	        	var path = JSON.parse(data.response).filePath;
	        	var fName = JSON.parse(data.response).fileName;
	        	imageNames.push(fName);
	        	var html = '<tr>'+
							'<td>'+ fName +'</td>'+
							'<td><img class="ossfile-img" src="'+ path +'"></td>'+
							'<td>'+
								'<a href="#" onclick="deleteNotSubmitImg(this);">删除   </a>'+
								'<a href="#" class="is-maxpicture" onclick="changeOssfile(\''+fName+'\',this);">设为主图</a>'+
							'</td>'+
						'</tr>';;
	        	$("#imageBody").append(html);
	        	$("#images").val(imageNames.toString());
		    });
	        
			document.getElementById('start_upload').onclick = function(){
				uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
			}
		});
				
		function changeOssfile(name,e){
			var index = $(".is-maxpicture").index($(e));
			$(".is-maxpicture").not(e).text('设为主图')
			$(e).text('主图');
			$('#maxpicture').val(name);
		}
		
		function form(){
			
			$("#inputForm").attr("action","${ctx}/product/product/genProduct/form");
			$("#inputForm").submit();
		}
		function parameter() {
			$("#inputForm").attr("action","${ctx}/product/product/genProduct/parameter");
			$("#inputForm").submit();
		}
		function picture() {
			$("#inputForm").attr("action","${ctx}/product/product/genProduct/picture");
			$("#inputForm").submit();
		}
		function associate() {
			$("#inputForm").attr("action","${ctx}/product/product/genProduct/gif");
			$("#inputForm").submit();
		}
		function detail() {
			$("#inputForm").attr("action","${ctx}/product/product/genProduct/detail");
			$("#inputForm").submit();
		}
		function deleteImage(obj,e) {
			
			var index2 = imageNames.indexOf(obj);
			if (index2 > -1) {
				imageNames.splice(index2,1);
			}
			$("#images").val(imageNames.toString());
			$(e).parent().parent().remove();
		}
		
		function deleteNotSubmitImg(e){
			$(e).parent().parent().remove();
		}
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li ><a href="#" onclick="form();">基本信息</a></li>
		<li ><a href="#" onclick="detail();">介绍</a></li>
		<li class="active"><a href="#" onclick="picture();">商品图片</a></li>
		<li><a href="#" onclick="parameter();">商品参数</a></li>
		<li ><a href="#" onclick="associate();">关联</a></li>
	</ul><br/>
	<spring:htmlEscape defaultHtmlEscape="true" />
	<form:form id="inputForm" modelAttribute="genProduct" action="${ctx}/product/product/genProduct/save" method="post" class="form-horizontal" >
		<form:hidden path="images" id="images"/>
		<form:hidden path="id"/>
		<form:hidden path="catalogid"/>
		<form:hidden path="name"/>
		<form:hidden path="introduce"/>
		<form:hidden path="code"/>
		<form:hidden path="brand"/>
		<form:hidden path="nowprice"/>
		<form:hidden path="stock"/>
		<form:hidden path="score"/>
		<form:hidden path="maxpicture"/>
		<form:hidden path="associateStr"/>
		<form:hidden path="producthtml" id="producthtml" htmlEscape="true" />
		<form:hidden path="detail" id="detail" htmlEscape="true" />
		<form:hidden path="isnew"/>
		<form:hidden path="isrecommend"/>
		<form:hidden path="order1"/>
		<sys:message content="${message}"/>	
		<div class="control-group">
			<label class="control-label">图片列表：</label>
		</div>
		<table id="contentTable" class="table table-striped table-bordered table-condensed">
			<thead>
				<tr>
					<th>图片名称</th>
					<th>地址</th>
					<shiro:hasPermission name="product:product:genProduct:edit"><th>操作</th></shiro:hasPermission>
				</tr>
			</thead>
			<tbody id="imageBody">
				<c:forEach items="${lst }" var="image" varStatus="ss">
					<c:if test="${image != '' }">
						<tr id="tr${ss }">
							<td>${image}</td>
							<td><img class="ossfile-img" src="${path }${image }"></td>
							<shiro:hasPermission name="product:product:genProduct:edit"><td>
								<a href="#" onclick="deleteImage('${image}',this);">删除</a>
								<c:if test="${image != genProduct.maxpicture }">
									<a href="#" class="is-maxpicture" onclick="changeOssfile('${image}',this);">设为主图</a>
								</c:if>
								<c:if test="${image == genProduct.maxpicture }">
									<a href="#" class="is-maxpicture" onclick="changeOssfile('${image}',this);">主图</a>
								</c:if>
								
							</td></shiro:hasPermission>
						</tr>
					</c:if>
				</c:forEach>
			</tbody>
		</table>
		<div class="control-group">
			<label class="control-label">图片：</label>
			<div class="controls">
				<input type="hidden" id="fileName" name="fileName" value="" />
				<input type="hidden" id="sizes" name="sizes" value="" />
				<p id="ossfile"></p>
				<input type="button" value="选择文件" id="browse" accept=".BMP,.JPG,.JPEG,PNG,GIF" class="color ci_width_90 zl_loading" />
				<input type="button" value="开始上传" id="start_upload" class="color ci_width_90 zl_loading" />
				<div id="image1"></div>
			</div>
		</div>
		<div class="form-actions">
			<input id="btnSubmitImg" class="btn btn-primary" type="button" value="保 存"/>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
	<script type="text/javascript">
		$('#btnSubmitImg').click(function (){
			$("#inputForm").submit();
		})
	</script>
</body>
</html>